<template>
  <div class="pdf-demo">
    <button @click="handleDown">jsPDF方式下载</button>
    <button @click="handleWindowPrint( '#demo', '电子合同' )">浏览器方式下载</button>
    <div id="demo">
      <article class="contract" style="position: relative">
        <p style="margin-top: 0; font-weight: 600">合同编号：1212121212121</p>
        <h1>XXXXXXXXXXXXXXXXXXXXXXXXXXX协议书</h1>
        <div class="key-info" style="display: flex">
          <aside class="info-left" style="flex: 1">
            <div class="info-row">
              <span>丙方（受让方）：</span>
              <span>莫文蔚</span>
            </div>
            <div class="info-row">
              <span>XXX金额：</span>
              <span>200000.00元</span>
            </div>
            <div class="info-row">
              <span>XXX期限：</span>
              <span>12个月</span>
            </div>
            <div class="info-row">
              <span>预期XXXXXXX：</span>
              <span>9.5%</span>
            </div>
          </aside>
          <aside class="info-right" style="flex: 1">
            <div class="info-row">
              <span>身份证号：</span>
              <span>374585488921542647</span>
            </div>
            <div class="info-row">
              <span>XXX方式：</span>
              <span>季度XXX，XXXXXXX</span>
            </div>
            <div class="info-row">
              <span>XXX日期：</span>
              <span>2018-04-28</span>
            </div>
            <div class="info-row">
              <span>XXX账户：</span>
              <span>6161787892928888</span>
            </div>
          </aside>
        </div>
        <div class="key-info-line">
          <div class="info-row">

            <span style="font-weight: 600">开户行：</span>
            <span>山东省XXXXXX农业银行(XXXXXXX中路支行)山XXXXXXXXXX中国农业银行</span>

          </div>
        </div>
        <p>
          为了保护XXXXXXXXXXXXXXXXX全，本协议在XXXXXXXXXXXXXXXXXXXXXXXXXX，XXXXXXXXXXXXXXXXX协议项下的XXX人身份信息以XXXXXXXXXXXXXXXXXXXXXX信息为准。甲、乙、丙三方根据平等、自愿、诚实信用原则，依据中华人民共和国合同法等法律法规之规定，经协商一致，就甲方XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX事宜达XXXXXXXXX：
        </p>

        <h3>第一条 XXXXXXXXXXXXXXX情况</h3>
        <p>甲方通过金融资产交易所摘牌项目资产包，并自愿将相关资产收益转让给丙方，详见《XXXXXXXXXXXXXXXXXXXXXXXXXXX说明书》。</p>
        <h3>第二条 收益XXXXXXXXXXX</h3>
        <p>
          甲方XXXXXXXXXXXXXXXXXX资产包本金金额为人民币（大写）贰仟万元整，（小写）¥20000000.00元，丙方受让以上收益权的1%，丙方支付的对价为人民币（大写）贰拾万元整，（小写）¥200000.00元。
          XXXXXXXXXXX，甲方基于XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX。
        </p>
        <h3>第三条 XXXXXXXXXXXXXXX</h3>
        <p>本协议自甲、乙、丙三方签字（盖章）之日起生效。</p>
        <h3>第四条 XXXXXXXXXXXXXXXXXX方式</h3>
        <p>丙方同意将收益权转让价款支付至甲方在《XXXXXXXXXXXXXXXXXXXXXXXXXXX说明书》中的XXXXXXXXXXX，XXXXXXXXXXXXXX之日即视为交付完成。</p>
        <h3>第五条 XXXXXXXXXXXXX</h3>
        <p>甲方保证其转让给丙方的收益权为甲方合法、有效、完全享有，甲方保证其不存在到期可以与该收益权相抵消的债务关系。</p>
        <h3>第六条 XXXXXXX</h3>
        <p>各方应严格履行本协议，一方违约的，应向守约方承担XXXXXXX，并赔偿因此给守约方造成的全部损失。</p>
        <h3>第七条 XXXXXXX</h3>
        <p>各方就收益权转让发生纠纷时应协商解决，协商不成，任何一方均可向被告住所地法院提起诉讼。</p>
        <h3>第八条 XXXX</h3>
        <p>各方已经充分了解《XXXXXXXXXXXXXXXXXXXXXXXXXXX说明书》的条文内容和相应的法律责任，并自愿签订本协议。</p>
        <!--
        img标签  增加 crossorigin="anonymous" 属性 允许 canvas内跨域请求 外部图片
        img标签使用注意：
        如果你要用来生成canvas的dom中包含的img图片，之前已经被你的用户访问过（例如你是在对线上现有的业务进行改造），显然之前你应该没有给<img>标签添加crossorigin="anonymous"属性，那么请注意，这时候你的用户的浏览器已经把这些图片缓存在了本地，所以即便你按照上面的步骤都做了也没用，因为访问图片时读到的都是不带Access-Control-Allow-Origin等响应头的缓存数据。这个时候你要做的，就是给要生成canvas的dom中的所有<img>标签的src添加一个任意的字符串，只要能起到重新发起图片读取请求，从而避免读取到浏览器缓存数据即可，
        如下所示：'http://h0.hucdn.com/open/201819/9404b56f97e7df8a_750x1334.png?any_string_is_ok'
        注意，不要添加随机字符串，那会击穿CDN缓存的，随便添加一个固定的字符串，能够避免读取到浏览器的缓存数据就可以了。这是本人血的教训！所以请大家千万千万不要忽视这一点！
        详见：文章&#45;&#45;》 https://www.jianshu.com/p/22bd5b98e38a
        使用方式： 见本代码开头的 第一注释。

        -->
        <footer style="display: flex">
          <div style="flex: 1;">
            <div>甲方（转让方）：</div>
            <div style="position: relative; padding-top: 50px">XXXXXXXXXXXXXXXX管理有限公司<img
              src="/static/sealPic/seal_js.png" alt="章"
              style="position: absolute; top: -50px; left: 0; width: 190px; height: 190px;"/></div>
          </div>
          <div style="flex: 1; margin-left: 30px;">
            <div>乙方（投顾方）：</div>
            <div style="position: relative; padding-top: 50px">XXXXXXXXXXX信息服务有限公司<img src="/static/sealPic/seal_jr.png"
                                                                                       alt="章"
                                                                                       style="position: absolute; top: -50px; left: 0; width: 190px; height: 190px;"/>
            </div>
          </div>
          <div style="flex: 1; margin-left: 30px;">
            <div>签名：</div>
            <div style="position: relative;"><img crossorigin="anonymous"
                                                  src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2235535602,207523732&fm=26&gp=0.jpg "
                                                  alt="" style="position:absolute; left: 20px; width: 190px;"></div>
          </div>
        </footer>
      </article>
    </div>
  </div>
</template>

<script>

  import htmlToPdf from '@/unit/htmlToPdf';

  export default {
    name: "PdfDemo",

    data() {
      //和导出pdf没关系
      return {
        contractData: {
          name: '',
          phone: '',
          // signatureImg: '../../../static/signature.gif'
          signatureImg: ''
        },

      }

    },
    methods: {
      handleDown() {
        htmlToPdf.downloadPDF(document.querySelector('#demo'), '我的合同');
      },

      handleWindowPrint(ele, fileName) {
        //留存原来的 html
        // let bdHtml = window.document.body.innerHTML;
        // let bdHtml = document.querySelector('#app').innerHTML;
        //要打印的 内容 html
        // document.body.innerHTML =  document.querySelector('#demo').innerHTML;
        // document.body.innerHTML =  document.querySelector('#demo').outerHTML;
        // document.querySelector('#app').innerHTML =  document.querySelector('#demo').outerHTML;
        // document.querySelector('#main').innerHTML =  document.querySelector('#demo').outerHTML;
        console.log(666);
        //去除页面不必要的 head 标签内  内容， 避免影响打印页 ， title 为保存为 pdf 的文件时的 文件名
        document.head.innerHTML = '<meta charset="utf-8">\n' +
          ' <title> ' + fileName + '</title>\n' +
          ' <link rel="shortcut icon" href="http://192.168.29.50:8081/favicon.ico" type="image/x-icon" />\n' +
          ' <meta name="format-detection" content="telephone=no">\n' +
          ' <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">\n' +
          ' <meta name="viewport" content="width=device-width,initial-scale=1.0">\n' +
          ' <link rel="stylesheet" href="./static/css/contract.css"/>';  //生成pdf的外部css样式
        // document.body.innerHTML =  document.querySelector('#demo').outerHTML;
        // document.querySelector('#main').innerHTML =  document.querySelector('#demo').outerHTML;
        // document.body.innerHTML =  document.querySelector('#demo').outerHTML;
        document.body.innerHTML = document.querySelector(ele).outerHTML;

        // window.print();

        //转异步 等待dom元素渲染（样式）完毕在打印
        setTimeout(() => {
          //打印
          window.print();
          //刷新页面
          window.location.reload();
        }, 20)


        //重新设会当前页面
        // window.document.body.innerHTML = bdHtml;
        // document.querySelector('#app').innerHTML =  bdHtml;
        //刷新页面
        // window.location.reload();
      },


    },
    mounted() {
      //和导出pdf没关系
      //模拟发送 ajax
      setTimeout(() => {
        this.contractData = {
          name: '张三',
          phone: '11000000000',
          // signatureImg: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2790212770,2892458707&fm=26&gp=0.jpg'
          signatureImg: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2235535602,207523732&fm=26&gp=0.jpg'
        }
      }, 3000);
    }
  }
</script>

<style scoped>


  #demo {
    background-color: #fff;
    width: 1000px;
    /* height: 400px; */
    margin: auto;
  }

  article {
    background: #fff;
  }

  #demo .contract {
    background: #fff;
    /*padding: 76px 76px 114px;*/
    padding: 86px 86px 114px;
    position: relative;

  }

  #demo .contract .key-info {
    display: flex;
  }

  #demo .contract .key-info > aside {
    flex: 1;
  }

  #demo .contract > h1 {
    text-align: center;
    margin-top: 0;
  }

  #demo .contract > p:first-child {
    margin-top: 0;
  }

  #demo .contract .key-info .info-left .info-row > span:first-child,
  #demo .contract .key-info .info-right .info-row > span:first-child {
    font-weight: 600;
  }

  #demo .contract .signature {
    position: absolute;
    right: 86px;
    bottom: 0;
  }

  #demo .contract .signature > img {
    width: 200px;
  }

  #demo {
    color: #000;
    font-family: "Microsoft YaHei";
  }


  h1 {
    font-size: 24px;
    font-weight: 700;
  }

  h3 {
    font-size: 18.72px;
    font-weight: 700;
    margin: 18.720px 0;
  }

  p {
    margin: 16px 0;
  }


</style>
